<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        ul,
        li {
            margin: 0;
        }
        /* img 默认是inline-block，它存在一些细微的布局问题，一般设置为block*/
        img {
            
            display: block;
        }

        ul,
        li {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        /* body是页面的元素的祖先标签，它设置的css属性可以被其他的标签继承
        一般设置：字体大小，行高, 字体，颜色*/
        body{
            font-size: 14px;
            line-height: 1.5;
            background-color: #fff;
            font-family: "Microsoft Yahei";
            color:#333;
        }
        /* a标签的默认下划线去掉，统一设置a标签的颜色 */
        a {
            text-decoration: none;
            color: #757575;

        }
        /*统一设置a标签的鼠标悬停颜色*/
        a:hover {
            color: #ff6700;
        }
        /* 统一设置版芯 
            版芯：页面中居中的部分margin-left,right auto可以让块级元素水平居中，宽度为1226px
        */
        .container {
            width: 1226px;
            margin-left: auto;
            margin-right: auto;
        }

        /* 工具类 */
        .flex {
            display: flex;
            flex-wrap: wrap;
        }

        /* 顶部的导航条 */
        .topbar {
            height: 40px;
            line-height: 40px;
            font-size: 12px;
            color: #b0b0b0;
            background: #333;
        }

        .topbar-nav {
            display: flex;
            justify-content: space-between;
        }

        .topbar a {
            color: #b0b0b0;
            padding: 0 5px;
        }

        
        /* 站点头部 */
        .site-header {
            height: 100px;
            background: #fff;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        .site-header a {
            color: #333;
        }
        .site-header a:hover {
            color:#ff6700;
        }


        .site-header .logo img {
            width: 56px;
            height: 56px
        }

        /* 居中hero-banner*/
        .hero {
            padding-bottom: 26px;
        }

        .hero-banner {
            position: relative;
        }

        .banner-bg {
            width: 1226px;
            height: 460px;
        }

        .hero-banner .btn-left, .hero-banner .btn-right {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);

            width: 41px;
            height: 69px;
            z-index: 1;
            cursor: pointer;

        }
        .btn-right{
            right: 0;
            background-image: url('./img/icon-slides.png');
            /* background-position: -84px 0; */
            background-position: -125px 0;
        }
        .btn-left {
            left: 234px;
            background-position: -82px 0;
            background-image: url('./img/icon-slides.png');
        }
        .btn-left:hover{
            background-position: -164px 0;

        }
        .btn-right:hover{
            background-position: -209px 0;

        }

        sidebar {
            box-sizing: border-box;
            padding-top: 20px;
            position: absolute;
            top: 0;
            left: 0;
            width: 234px;
            height: 460px;
            background: rgba(105, 101, 101, .6);
        }

        sidebar a {
            color: #fff;
            display: block;
            height: 42px;
            line-height: 42px;
            padding-left: 20px;
        }

        /* 固定工具类 */
        /* 234 + 992 = 1226 */
        /* 234*5 + 14*4 = 1170  + 56 = 1226 */

        .w234 {
            width: 234px;
        }

        .w992 {
            width: 992px;
        }

        .channels{
            margin-top: 15px;
        }

        .channel-list {
            font-size: 12px;
            text-align: center;
            background: #5f5750;
            display: flex;
            flex-wrap: wrap;

        }

        .channel-list .item {
            width: 78px;
            height: 85px;
            box-sizing: border-box;
            padding-top: 18px;
        }

        .channel-list a {
            color: #fff;
        }

        .channel-list img {
            width: 24px;
            height: 24px;
            display: block;
            margin: 0 auto 5px;
        }

        .home-promo-list {
            display: flex;
            justify-content: space-between;
        }

        .home-promo-list div,
        .home-promo-list img {
            width: 316px;
            height: 170px;
        }

        .home-promo-list div {
            margin-left: 15px;
        }

        /* 页面主体开始*/
        .page-main {
            padding-top: 26px;
            background-color: #f5f5f5;
        }

        /* 商品栏目的头部 */
        .block-header {
            line-height: 58px;
            height: 58px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .block-header .block-title {
            margin: 0;
            font-size: 22px;
            font-weight: 200;
            line-height: 58px;
            color: #333;
        }

        .goods img {
            display: block;
        }

        .goods .left a {
            display: block;
        }

        .good {
            width: 234px;
            height: 300px;
            margin-bottom: 14px;
            margin-left: 14px;
            text-align: center;
            background-color: #fff;
            box-sizing: border-box;
            padding: 20px 0;

            transition: all .2s linear;
        }

        .good:hover {
            cursor: pointer;
            /* 向上移动10px */
            /* transform: translateY(-10px); */
            box-shadow: 0 15px 30px rgba(0, 0, 0, .1);
            transform: translate3d(0, -2px, 0);
        }


        .good .title {
            font-size: 14px;
            font-weight: 400;
            color: #333;
            margin: 0 10px 2px;
        }

        .good img {
            width: 160px;
            height: 160px;
            margin: 0 auto;
        }

        .good .desc {
            margin: 0 10px 10px;
            height: 18px;
            font-size: 12px;
            color: #b0b0b0;
        }

        .good .price {
            color: #ff6700;
        }

        .good del {
            margin-left: .5em;
            color: #b0b0b0;
        }


        /*页面底部*/
        footer {
            background-color: #fff;
            padding-bottom: 40px;
            font-size:12px;
        }

        .service ul {
            height: 80px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            text-align: center;
            border-bottom: 1px solid #e0e0e0;
        }
        
        .service ul li {
            line-height: 40px;
            /* border-left: 1px solid #e0e0e0; */
            text-align: center;
        }
        .service ul li:last-child {
            width: 250px;
            border-left: 1px solid #e0e0e0;
        }

        .service ul li a {
            color: #616161;
            font-size: 16px;
        }

        footer .links {
            display: flex;
            justify-content: space-between;
            padding-top: 40px;
        }

        footer .links .cols-link {
            width: 160px;
            font-size: 12px;
        }

        footer .links .cols-link li {
            margin: 10px 0;
        }

        footer .links .cols-link h5 {
            font-size: 14px;
            color: #424242;
            margin-bottom: 25px;
            font-weight: normal;
        }
        .contact {
            
            text-align: center;
        }
        .contact1 {
            margin-bottom: 20px;
            width: 250px;
            border-left: 1px solid #e0e0e0;
        }
        .contact p {
            margin-bottom: 5px;
        }


        .contact .phone {
            font-size: 22px;
            line-height: 1;
            color: #ff6700;
        }

        .contact .btn {
            display: inline-block;
            background: #fff;
            color: #ff6700;

            width: 118px;
            height: 28px;
            font-size: 12px;
            line-height: 28px;
            padding: 0;
            margin: 0;
            border: 1px solid #ff6700;
            cursor: pointer;
        }

        .home-tool-bar{
            position: fixed;
            right: 0px;
            bottom: 50px;
            width: 82px;
            background: #fff;
        }
        .home-tool-bar li {
            box-sizing: border-box;
            height: 90px;
            width: 82px;
            border: 1px solid #f5f5f5;
            text-align: center;
            padding-top:18px;
        }
        .home-tool-bar li img {
            width: 30px;
            height: 30px;
            margin: 0px auto;
        }
        .home-tool-bar li span {
            font-size: 14px;
            color:#757575;
        }
    </style>
</head>

<body>
    <nav class="topbar">
        <div class="container topbar-nav">
            <div>
                <a href="">小米官网</a><span> | </span>
                <a href="">小米商城</a><span> | </span>
                <a href="">小米澎湃OS</a><span> | </span>
                <a href="">小米汽车 </a>

            </div>
            <div>
                <a href="">登录</a><span>|</span>
                <a href="">注册</a><span>|</span>
                <a href="">消息通知</a>
            </div>
        </div>
    </nav>

    <section>
        <div class="container site-header">

            <div class="logo">
                <a href="">
                    <img src="./img/logo.png" alt="">
                </a>
            </div>
            <div>
                <a href="">Xiaomi手机</a>
                <a href="">Redmi手机</a>
                <a href="">电视</a>
                <a href="">笔记本</a>
                <a href="">平板</a>
                <a href="">家电</a>
                <a href="">路由器</a>
                <a href="">服务中心</a>
                <a href="">社区</a>
            </div>
            <div class="search">
                <input type="text" placeholder="手机">
            </div>
        </div>
    </section>
    <div class="container hero">
        <div class="hero-banner">
            <img src="./img/banner.png" alt="" class="banner-bg">
            <sidebar>
                <a href="">手机</a>
                <a href="">电视</a>
                <a href="">家电</a>
                <a href="">笔记本 平板</a>
                <a href="">出行 穿戴</a>
                <a href="">耳机 音箱</a>
                <a href="">健康 儿童</a>
                <a href="">生活 箱包</a>
                <a href="">智能 路由器</a>
                <a href="">电源 配件</a>
            </sidebar>

            <div class="btn-left">left</div>
            <div class="btn-right">right</div>
        </div>

        <section class="flex channels">
            <div class="w234 channel-list">
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
                <div class="item">
                    <img class="" src="./img/clock.png">
                    <a href="">保障服务</a>
                </div>
            </div>
            <div class="w992 home-promo-list">
                <div class="">
                    <a href="">
                        <img src="./img/xiaomi14.png" alt="">
                    </a>
                </div>
                <div class="">
                    <a href="">
                        <img src="./img/xiaomi14.png" alt="">
                    </a>
                </div>
                <div class="">
                    <a href="">
                        <img src="./img/xiaomi14.png" alt="">
                    </a>
                </div>

            </div>

        </section>

    </div>
    <section class="page-main">

        <div class="container">
            <div>
                <a href="">
                    <img class="container" src="./img/净化器.webp" alt="空气净化器">
                </a>
            </div>

            <div class="block">
                <div class="block-header">
                    <h3 class="block-title">手机</h3>
                    <span>查看更多</span>
                </div>
                <div class="goods flex">
                    <div class="left w234">
                        <a href="">
                            <img class="w234" src="./img/xiaomi14.webp" alt="">
                        </a>
                    </div>
                    <div class="w992 flex">
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>

                    </div>

                </div>
            </div>


            <div class="block">
                <h3 class="block-title">手机</h3>
                <div class="goods flex">
                    <div class="left w234">
                        <a href="" style="margin-bottom: 14px;">
                            <img class="w234" src="./img/saodi.webp" alt="">
                        </a>

                        <a href="">
                            <img class="w234" src="./img/kongqi.webp" alt="">
                        </a>
                    </div>
                    <div class="w992 flex">
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>
                        <div class="good">
                            <a href="">
                                <img src="./img/phone1.webp" alt="">
                                <h5 class="title">Redmi Turbo 3</h5>
                                <p class=desc>性能旋风，席卷而来</p>
                                <p> <span class="price">1669元起</span> <del>1999元</del></p>
                            </a>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </section>


    <footer>
        <div class="container">
            <div class="service">
                <ul>
                    <li><a href="">预约维修服务</a</li>
                    <li><a href="">7天无理由退货</a</li>
                    <li><a href="">15天免费换货</a</li>
                    <li><a href="">满69包邮</a</li>
                    <li><a href="">预约维修服务</a</li>
                    <li><a href="">1100余家售后网点</a</li>
                </ul>
            </div>

            <div class="links">
                <div class="cols-link">
                    <h5>选购指南</h5>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                    </ul>
                </div>
                <div class="cols-link">
                    <h5>选购指南</h5>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                    </ul>
                </div>
                <div class="cols-link">
                    <h5>选购指南</h5>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                    </ul>
                </div>
                <div class="cols-link">
                    <h5>选购指南</h5>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                    </ul>
                </div>
                <div class="cols-link">
                    <h5>选购指南</h5>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">电视</a></li>
                        <li><a href="">笔记本</a></li>
                        <li><a href="">平板</a></li>
                    </ul>
                </div>

                <div class="contact">
                    <div class="contact1">
                        <p class="phone">400-100-5678</p>
                        <p>8:00-18:00（仅收市话费）</p>
                        <a href="#a" class="btn">人工客服</a>
                    </div>
                    <div>
                        <p>400-100-5678</p>
                        <p>8:00-18:00（仅收市话费）</p>
                        <button>人工客服</button>
                    </div>

                </div>
            </div>
        </div>

    </footer>

    <div class="home-tool-bar">
        <ul>
            <li><a href="">
                <img src="./img//98a23aae70f25798192693f21c4d4039.png">
                <span>手机APP</span>
            </a></li>
            <li><a href="">
                <img src="./img//98a23aae70f25798192693f21c4d4039.png">
                <span>手机APP</span>
            </a></li>
            <li><a href="">
                <img src="./img//98a23aae70f25798192693f21c4d4039.png">
                <span>手机APP</span>
            </a></li>
            <li><a href="">
                <img src="./img//98a23aae70f25798192693f21c4d4039.png">
                <span>手机APP</span>
            </a></li>
            <li><a href="">
                <img src="./img//98a23aae70f25798192693f21c4d4039.png">
                <span>手机APP</span>
            </a></li>
      
        </ul>
    </div>

</body>

</html>